// TS CODE
export {};

// // const count: number = 100;
// // console.log(count);

// //TypeScript类型注解
// // export {};

// // let msg: string;
// // msg = "this is message";

// // let count: number;
// // count = 100;

// // let isLoading: boolean;
// // isLoading = false;

// //数组类型注解
// //语法1：类接口
// // let arr1: number[];
// // arr1 = [11, 22, 33, 44];

// // //语法2：Array<number>
// // let arr2: Array<string> = ["jack", "tom", "marray"];

// // let arr3: string[] = ["zhangsan", "lisi", "wangwu"];
// // let arr4: Array<string>;
// // arr4 = ["100"];

// //联合类型

// // let arr1: (string | number)[] = ["jack", 18, "北京"]; //数组里只能是两种类型中的一种类型

// // let arr2: string | number[]; //表示可以存放 string 或 number数组 类型

// // //类型别名
// // type ItemType = (string | number)[];

// // //使用我们创建的别名
// // let arr3: ItemType = ["jack", 100];
// // let arr4: ItemType = ["john", 200];

// // //思考题
// // let fool: number | string[];
// // fool = 33;
// // fool = ["lisi", "jack", "marry"];

// // //函数声明
// // function add(a: number, b: number): number {
// //   return a + b;
// // }

// // console.log(add(3, 5));

// // let res: number;
// // res = add(2, 3);

// // //函数表达式
// // //分开注解
// // const add1 = (a: number, b: number): number => {
// //   return a + b;
// // };

// // //整体注解(库文件)
// // type AddFn = (a: number, b: number) => number;
// // const add3: AddFn = (a, b) => {
// //   return a + b;
// // };
// // add3(5, 6);

// //可选参数
// // function buildName(firstName: string, lastName?: string) {
// //   if (lastName) {
// //     return `${firstName}${lastName}`;
// //   } else {
// //     return firstName;
// //   }
// // }

// // console.log(buildName("simith"));

// // //无返回值
// // function eachArr(arr: number[]): void {
// //   arr.forEach((item) => console.log(item));
// // }

// // const result = eachArr([1, 2, 3]);

// // function arr2Str(arr: (string | number)[], split: string): string {
// //   return arr.join(split);
// // }

// // console.log(arr2Str([1, 2, 3], "-"));
// // console.log(arr2Str(["4", "5", "6"], "&"));

// // //interface 接口类型

// // //基础语法
// // interface Person {
// //   name: string;
// //   age: number;
// // }

// // let p: Person = {
// //   name: "jack",
// //   age: 18,
// // };

// // //表单数据收集场景说明
// // interface LoginForm {
// //   username: string;
// //   password: string;
// // }

// // let form: LoginForm = {
// //   username: "jack",
// //   password: "123456",
// // };

// // //渲染后端列表场景说明
// // interface Goods {
// //   id: string;
// //   price: number;
// // }

// // let list: Goods[] = [
// //   {
// //     id: "1001",
// //     price: 200,
// //   },
// // ];

// // list.forEach((item) => console.log(item.price));

// //可选设置
// // interface Props {
// //   type: string;
// //   size?: string;
// // }

// // let props: Props = {
// //   type: "success",
// // };

// // props = {
// //   type: "success",
// //   size: "large",
// // };

// //接口继承

// // //父接口 -- 原价商品类型
// // interface GoodsType {
// //   id: string;
// //   price: number;
// // }

// // //子接口继承 -- 打折商品类型
// // interface DisGoodsType extends GoodsType {
// //   disCount: number;
// // }

// // let goods: DisGoodsType = {
// //   id: "1001",
// //   price: 1000,
// //   disCount: 880,
// // };

// // interface Data {
// //   title: string;
// //   content: string;
// // }

// // interface ResData {
// //   code: number;
// //   msg: string;
// //   data: Data;
// // }

// // let res: ResData = {
// //   code: 200,
// //   msg: "success",
// //   data: {
// //     title: "文章标题",
// //     content: "文章内容",
// //   },
// // };

// // console.log(res.data.content);

// //type实现对象类型注解
// // type Person = {
// //   name: string;
// //   age: number;
// // };

// // let p: Person = {
// //   name: "jack",
// //   age: 18,
// // };

// // p = {
// //   name: "tom",
// //   age: 20,
// // };

// // //type模拟继承（交叉类型&）

// // //父接口
// // type GoodsType = {
// //   id: string;
// //   price: number;
// // };

// // //子接口继承
// // type DisGoodsType = GoodsType & {
// //   disPrice: number;
// // };

// // let goods: DisGoodsType = {
// //   id: "10086",
// //   price: 888888,
// //   disPrice: 666666,
// // };

// // console.log(goods.disPrice);

// // //同名interface
// // interface Item {
// //   name: string;
// // }

// // interface Item {
// //   // name: string, //ok
// //   // name: number, //err
// //   age: number;
// // }

// // let item: Item = {
// //   name: "李明",
// //   age: 18,
// // };

// // //同名 type

// // type Item1 = {}; // err

// // type Item1 = {}; //err

// type Data = {
//   title: string;
//   content: string;
// };

// type ResData = {
//   code: string;
//   msg: "success";
//   Data: {
//     title: string;
//     content: string;
//   };
// };

// let res: ResData = {
//   code: "10008611",
//   msg: "something went wrong",
//   Data: {
//     title: "你好， 世界",
//     content: "hi",
//   },
// };

// console.log(res.Data.title);

//字面量类型

// //普通number类型 可以赋值任何数值
// let count: number;
// count = 100;
// count = 200;

// //字面量类型100，只能赋值为100
// let count1: 100;
// count1 = 100;
// count1 = 200;

// type Gender = "男" | "女";

// let gender: Gender = " "; //err Gerder类型只能赋值 男 或 女

// type Props = {
//   type: "primary" | "success" | "danger" | "warning";
// };

//const
// let str1 = "123";
// const str2 = "456";

// type Res = {
//   code: 1001 | 1002 | 1003;
//   msg: string;
// };

// let res: Res = {
//   code: 1001,
//   msg: "接口成功",
// };

// //类型推断
// let count = 100; //自动推导为number类型的变量
// count = 200; //ok
// ciunt = false; //err

// function add(a: number, b: number) {
//   //自动推导返回值为number类型
//   return a + b;
// }

// const result = add(1, 2); //result的类型是number

// //any类型
// let foo: any;
// foo = 100;
// foo = "hello";
// foo = false;

// let bar: number;
// bar = foo;

//类型断言
// const link1 = document.getElementById("link");
// link1.href;//err

// const link2 = document.getElementById("link") as HTMLAnchorElement;
// link2.href;

// //注意事项
// function log(foo: string | number) {
//   console.log((foo as number).toFixed);
// }

// log(100);
// log("100"); // 编译时可以通过，运行时会报错

//泛型
// interface User {
//   name: string;
//   age: number;
// }

// interface UserData {
//   code: number;
//   msg: string;
//   data: User;
// }

// interface Goods {
//   id: number;
//   goodsName: string;
// }

// interface GoodsData {
//   code: number;
//   msg: string;
//   data: Goods;
// }

// //泛型改造
// //1.定义泛型 把可变参数的部分抽象成泛型参数 T
// interface ResData<T> {
//   code: number;
//   msg: string;
//   data: T;
// }

// //2.定义具体类型然后使用泛型的时候传入到参数的位置
// interface User {
//   name: string;
//   age: number;
// }

// interface Goods {
//   id: number;
//   goodsName: string;
// }

// //3.使用泛型接口
// let user: ResData<User> = {
//   code: 200,
//   msg: "success",
//   data: {
//     name: "jack",
//     age: 18,
//   },
// };

// let goods: ResData<Goods> = {
//   code: 200,
//   msg: "success",
//   data: {
//     id: 1001,
//     goodsName: "衬衫",
//   },
// };

// //泛型别名
// //1.定义泛型 把可变参数的部分抽象成泛型参数 T
// type ResData<T> = {
//   code: number;
//   msg: string;
//   data: T;
// };

// //2.定义具体类型然后使用泛型的时候传入到参数的位置
// type User = {
//   name: string;
//   age: number;
// };

// type Goods = {
//   id: number;
//   goodsName: string;
// };

// //3.使用泛型接口
// let user: ResData<User> = {
//   code: 200,
//   msg: "success",
//   data: {
//     name: "jack",
//     age: 18,
//   },
// };

// let goods: ResData<Goods> = {
//   code: 200,
//   msg: "success",
//   data: {
//     id: 1001,
//     goodsName: "衬衫",
//   },
// };

// //泛型函数
// function creatArray<T>(length: number, value: T) {
//   let result = [];
//   for (let i = 0; i < length; i++) {
//     result[i] = value;
//   }
//   return result;
// }

// creatArray<number>(4, 100);
// creatArray<string>(4, "100");

//泛型约束
// function logLen<T>(obj: T) {
//   console.log(obj.length);//err
// }

// interface LengthObj {
//   length: number;
// }

// function logLen1<T extends LengthObj>(obj: T) {
//   console.log(obj.length);
// }

// logLen1({ length: 10 }); //传一个对象
// logLen1(["100"]); //传数组
// // logLen1(100);//err

//综合案例

function updateData() {
  //1.获取最新列表，取到最后一项
  const list = getList();
  const lastItem = list[list.length - 1];

  //2.在上一条记录的基础上count+1配合当前时间添加到列表的尾部
  list.push({
    count: lastItem ? lastItem.count + 1 : 1,
    time: getFormatTime(),
  });

  //3.最新列表渲染到页面
  rander(list);

  //把最新列表存入本地
  setList(list);
}

type Item = {
  count: number;
  time: string;
};

const KEY = "ts-key";
function getList(): Item[] {
  //TODO
  return JSON.parse(localStorage.getItem(KEY) || "[]");
}

// console.log(getList());//测试

function setList(list: Item[]) {
  //TODO
  localStorage.setItem(KEY, JSON.stringify(list));
}
// setList([{ count: 1, time: "10:10:10" }]);//测试

function getFormatTime() {
  //TODO
  const _time = new Date();
  const h = _time.getHours();
  const m = _time.getMinutes();
  const s = _time.getSeconds();
  return `${h}:${m}:${s}`;
}

// console.log(getFormatTime());//测试

function rander(list: Item[]) {
  //TODO
  //1.把List中每个对象格式化成字符串
  const strArr = list.map((item) => {
    return `刷新次数为：${item.count}, 刷新时间为：${item.time}`;
  });

  //2.调用dom api 渲染到页面中
  const app = document.getElementById("app") as HTMLDivElement;
  app.innerHTML = strArr.join("<br>");
}

updateData();
